<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-width="250">
			<u-form-item label="用章负责人" prop="name">
				<u-input v-model="form.name" placeholder="用章负责人" disabled />
			</u-form-item>
			<u-form-item label="用章名" prop="sealName">
				<u-input v-model="form.sealName" placeholder="请输入用章名" />
			</u-form-item>
			<u-form-item label="用章原因" prop="reason">
				<u-input v-model="form.reason" placeholder="请输入用章原因" type="textarea" />
			</u-form-item>
			<u-form-item label="用章类别" prop="category">
				<u-radio-group v-model="form.category" @change="selectCate">
					<u-radio  v-for="(item, index) in form.categoryList" :key="index" :name="item.name"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="用章开始时间" prop="start">
				<u-calendar v-model="startShow" :mode="mode" @change="startChange" min-date="1950-01-01"
					max-date="2030-01-01"></u-calendar>
				<u-input v-model='form.start' type="select" @click="startShow = true" placeholder="请设置用章开始时间" />
			</u-form-item>
			<u-form-item label="用章归还时间" prop="end">
				<u-calendar v-model="endShow" :mode="mode" @change="endChange" min-date="1950-01-01"
					max-date="2030-01-01"></u-calendar>
				<u-input v-model='form.end' type="select" @click="endShow = true" placeholder="请设置用章归还时间" />
			</u-form-item>
		</u-form>
		<view class="btn">
			<u-button shape="square" type="primary" @click="submit">提交</u-button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import askSealApi from '../../api/askSeal.js'
	export default {
		data() {
			return {
				form: {
					// 用章负责人姓名
					name: '',
					// 用章名
					sealName: '',
					// 用章原因
					reason: '',
					// 开始时间,
					start: '',
					// 结束时间
					end: '',
					// 用章类别
					categoryList: [{
							name: '公章',
							disabled: false
						},
						{
							name: '财务值',
							disabled: false
						},
						{
							name: '发票专用章',
							disabled: false
						},
						{
							name: '合同章',
							disabled: false
						},
						{
							name: '人事章',
							disabled: false
						},
						{
							name: '资质章',
							disabled: false
						}
					],
					category: '公章'
				},
				// 是否显示用章开始时间的日历
				startShow: false,
				// 是否显示用章归还时间的日历
				endShow: false,
				// 日历的模式是范围模式
				mode: 'date',
				// 表单验证规则
				rules: {
					reason: [{
						required: true,
						message: '请输入用章原因',
						trigger: ['change', 'blur']
					}],
					sealName: [{
						required: true,
						message: '请输入用章名',
						trigger: ['change', 'blur']
					}],
					category: [{
						required: true,
						message: '请设置用章类别',
						trigger: ['change', 'blur']
					}],
					start: [{
						required: true,
						message: '请设置用章开始时间',
						trigger: ['change', 'blur']
					}],
					end: [{
						required: true,
						message: '请设置用章归还时间',
						trigger: ['change', 'blur']
					}]
				}
			};
		},
		methods: {
			// 显示消息提示框
			showToast(title, type) {
				this.$refs.uToast.show({
					title,
					type,
					position: 'top'
				})
			},
			// 请假开始时间日历改变的回调
			startChange(e) {
				console.log(e);
				this.form.start = e.result
			},
			// 请假结束时间日历改变的回调
			endChange(e) {
				console.log(e);
				this.form.end = e.result
			},
			// 用章类别选择的回调
			selectCate(e) {
				this.form.category = e
			},
			// 提交表单的回调
			submit() {
				// 验证表单
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						const {
							name,
							sealName,
							reason,
							time,
							start,
							end,
							category
						} = this.form
						askSealApi.askSeal({
							sealBy: name,
							sealName: sealName,
							sealReason: reason,
							sealType: category,
							sealBegin: start,
							sealEnd: end
						}).then(res => {
							console.log(res)
							this.showToast('提交成功', 'success')
							setTimeout(() => {
								this.$Router.replaceAll({
									name: 'index'
								})
							}, 1000)
						}).catch(error => {
							this.showToast('提交失败', 'error')
						})
					} else {
						console.log('验证失败');
					}
				});
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.form.name = this.$store.state.userInfo.username
		}
	};
</script>

<style scoped lang="scss">
	.container {
		width: 90%;
		margin: 0 auto;

		.btn {
			margin-top: 20px;
		}
	}
</style>
